<template>
    <div>
        <nav-bar class="cart-nav-bar"><div slot="center">购物车({{getCartLength}})</div></nav-bar>
        <scroll class="cartList-scroll">
            <shopcart-list v-if="getCartLength>0"></shopcart-list>
            <div v-else class="NoCart">
                <span>购物车是空的~</span>
            </div>
        </scroll>
        
        <shop-cart-bottom-bar></shop-cart-bottom-bar>
    </div>
</template>

<script>
    import {mapGetters} from "vuex"

    import NavBar from 'components/common/navbar/NavBar.vue'
    import Scroll from 'components/common/scroll/Scroll.vue'

    import ShopcartList from './childComps/ShopcartList.vue'
    import ShopCartBottomBar from './childComps/ShopCartBottomBar.vue'

    export default {
        name:'Shopcart',
        components: {
            NavBar,
            Scroll,

            ShopcartList,
            ShopCartBottomBar,
        },
        computed:{
            // mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性：
            ...mapGetters(["getCartLength","getCartList"]),
            // ...mapGetters({
            //     length:"getCartLength",
            //     alias:"getCartList"
            // })
        }
    }
</script>

<style scoped>
    .cart-nav-bar{
        background: var(--color-tint);
        color: #fff
    }
    .cartList-scroll{
        height: calc(100vh - 135px);
        overflow: hidden;
    }
    .NoCart{
        display: flex;
        justify-content: center;
        align-items: center;
        height: 40vh;
    }
</style>